<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>学校列表</title>
		<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
		<style>
			table{
				border: 0;
			}
			td{
				width: 100px;
				border-bottom: 1px solid #36B9F8;
				background: lightpink;
				text-align: center;
				padding: 6px ;
			}
			a{
				color: black;
				text-decoration: none;
				border: 1px solid white;
				padding: 3px;
				border-radius: 2px;
				text-align: center;
				margin-left:4px ;
			}
		</style>
	</head>
	<body>
		 <table id="scs">
			 <caption>学校列表显示</caption>
			 <tr>
				 <td>学校编号</td>
				 <td>学校名字</td>
				 <td>学校地址</td>
				 <td>建校日期</td>
				 <td>学校人数</td>
				 <td>学校面积(㎡)</td>
				 <td>操作</td>
			 </tr>
			 
		 </table>
	</body>
	<script type="text/javascript">
	   // 发请求，获取到所有学校列表信息，将这些数据，更新在网页上。
	   // 访问listSchool.html页面的时候，就需要发异步请求，加载数据。
	   $(function(){
		   // jquery提供的异步请求的函数
		   $.ajax({
			  url:"../query.do", // 请求的地址 
			  type:"get", // 请求方式为get
			  dataType:"json", // 希望响应结果为json
			  headers:{"login": window.localStorage.getItem("flag")},
			  success:function(result){ // 成功函数， 响应状态码为200， 表示请求成功。
				                     // 成功函数的参数就是响应数据，参数可以随意去名字。
				  // console.log(result) 
				  var html ="";
  			      for(var i=0 ; i < result.length; i++){  
					  var school  = result[i];
					  // 给更新页面，拼接请求的参数
					  var schoolStr = "scode="+school.scCode+
					  "&sname="+school.scName+
					   "&saddress="+school.scAddress
					   +"&sarea="+school.scArea+"&stotal="+school.scTotal
					   +"&sbirth="+school.scBirth;
  			    	  html +=  `<tr>
  				 		<td>`+school.scCode+`</td>
  				 		<td>`+school.scName+`</td>
  				 		<td>`+school.scAddress+`</td>
  				 		<td>`+school.scBirth+`</td>
  				 		<td>`+school.scTotal+`</td>
  				 		<td>`+school.scArea+`</td>
  				 		<td><a href="delSchool?sccode=`+school.scCode+`">删除</a>
  				 		<a href="updateSchool.html?`+schoolStr+`">更新</a></td>
  				 		</tr>`;
  			      }
				  $("#scs").html($("#scs").html()+html);
			  }
		   });
	   })
	   
	</script>
</html>
